import React, {PureComponent} from 'react';
import {
	Button,
	StyleSheet,
	View
} from 'react-native';
// 初始化全局storage
import './Storage';

/**
 * @FileName: RnStorageDemo
 * @Author: mazaiting
 * @Date: 2018/6/20
 * @Description:
 */
class RnStorageDemo extends PureComponent {
	render() {
		return (
			<View style={styles.container}>
				<View>
					<Button
						title={'简单存储'}
						onPress={() => this.simpleSaveData()}
					/>
					<Button
						title={'简单读取'}
						onPress={() => this.simpleGetData()}
					/>
					<Button
						title={'移除'}
						onPress={() => this.simpleRmData()}
					/>
				</View>
			</View>
		)
	}
	
	/**
	 * 简单存储
	 */
	simpleSaveData() {
		storage.save({
			key: 'loginState',
			data: {
				state: true,
				age: 18
			},
			// expires 为有效时间
			expires: 1000 * 3600
		})
	}
	
	/**
	 * 简单读取
	 */
	simpleGetData() {
		storage.load({
			key: 'loginState',
			// autoSync(默认为true)意味着在没有找到数据或数据过期时自动调用相应的sync方法
			autoSync: true,
			// syncInBackground(默认为true)意味着如果数据过期，
			// 在调用sync方法的同时先返回已经过期的数据。
			// 设置为false的话，则等待sync方法提供的最新数据(当然会需要更多时间)。
			syncInBackground: true,
			// 给sync方法传递额外的参数
			syncParams: {
				extraFetchOptions: {
					// 各种参数
				},
				someFlag: true
			}
		}).then(value => {
			// 如果找到数据，则在then方法中返回
			alert(JSON.stringify(value));
			// console.log("value: "+JSON.stringify(value));
		}).catch(reason => {
			// 异常
			console.error(reason.message)
		})
	}
	
	simpleRmData() {
		storage.removeItem('loginState');
	}
}

/**
 * 样式属性
 */
const styles = StyleSheet.create({
	container: {
		backgroundColor: '#DDD'
	}
});

/**
 * 导出当前Module
 */
module.exports = RnStorageDemo;